<template>
	<view class="box">
		<view class="forget_content">
			<view class="item flex0">
				<view class="forget_lable">
					手机号码:
				</view>
				<view class="forget_input">
					<input type="number" maxlength="11" v-model="phone" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="item flex0">
				<view class="forget_lable">
					验证码:
				</view>
				<view class="forget_input1 flex1">
					<input type="text" v-model="vercode" placeholder-style="font-size: 24rpx;"
					 placeholder="请输入验证码" class="codeinput" />
					<view class="obtain-code" :class="{'getactive':iscode}" @click="phone_code">
						{{getCode}}
					</view>
				</view>
			</view>
			<view class="item flex0">
				<view class="forget_lable">
					设置密码:
				</view>
				<view class="forget_input flex0 w400">
					<!-- <image class="forgeticon" src="../../static/images/forgeticon.png" mode=""></image> -->
					<input type="password" maxlength="20" v-model="pwd" placeholder="请输入8-20位字符组成密码" />
				</view>
			</view>
			<view class="item flex0">
				<view class="forget_lable">
					确认密码:
				</view>
				<view class="forget_input flex0 w400">
					<!-- <image class="forgeticon" src="../../static/images/forgeticon.png" mode=""></image> -->
					<input type="password" maxlength="20" v-model="Newpwd" placeholder="请确认8-20位字符组成密码" />
				</view>
			</view>
			<view class="fromsubmit-btn" @click="fromsubmit()">

				确定
			</view>
		</view>


	</view>


</template>

<script>
	const msdjs = require('@/common/api_sign/md5.js');
	export default {
		data() {
			return {
				// 控制类
				cloershow: false,
				username: "",
				userpass: "",
				type: "text",
				isshowChenk: false,
				getCode: "获取验证码",
				iscode: true,
				time: 60,
				phone: "",
				vercode: "",
				pwd: "",
				Newpwd: "",
			}
		},
		methods: {
			fromsubmit() {
				let that = this;
				// var reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%]).{8,20}$/;
				var reg=/^(?=.*\d)(?=.*[a-z])(?=.*[!-\/:-@\[-`{-~])[!-~]{8,20}$/i
				
				if (that.vercode!='') {
					if (that.pwd!='' && that.Newpwd!='') {
						if (!reg.test(that.pwd)) {
							uni.showToast({
								title: "密码格式错误",
								icon: "none"
							})
							return false
						}
						if (that.pwd == that.Newpwd) {
							this.$util.request({ //修改密码
								url: '/mobile/index.php?act=login&op=updatePassword',
								method: 'post',
								data: {
									vercode: that.vercode,
									"mobile": that.phone,
									password: msdjs.hexMD5(that.pwd),
									password_confirm: msdjs.hexMD5(that.Newpwd),
									client: "wap",
									// shopType:'C'//'M':M店，'B':B店，'C':C店/默认M店
								},
							}).then(function(res) {
								if (res.error_code == 0) {
									uni.showToast({
										title: "重置成功",
										icon: "none",
										success: () => {
											setTimeout(() => {
												uni.redirectTo({
													url: "login"
												})
											}, 1000)
										}
									})
								} else {
									uni.showToast({
										title: res.message,
										icon: "none"
									})
								}
							})
						} else {
							uni.showToast({
								title: "两次输入密码不一致",
								icon: "none"
							})
						}
					} else {
						uni.showToast({
							title: "密码不能为空",
							icon: "none"
						})
					}
				} else {
					uni.showToast({
						title: "验证码不能为空",
						icon: "none"
					})
				}


			},
			phone_code() {
				let that = this;
				if (that.phone) {
					if (that.iscode) {
						that.iscode = false;
						this.$util.request({ //获取验证码
							url: '/mobile/index.php?act=login&op=sendCode',
							method: 'post',
							data: {
								"actiontype": 1,
								"mobile": that.phone
							},
						}).then(function(res) {
							if (res.error_code == 0) {
								let codesetInterval = setInterval(() => {
									that.time--;
									that.getCode = that.time + "s"
									if (that.time <= 0) {
										console.log(that.time)
										clearInterval(codesetInterval);
										that.getCode = "获取验证码";
										that.time = 60;
										that.iscode = true;
									}
								}, 1000)
							} else {
								that.iscode = true;
								uni.showToast({
									title: res.message,
									icon: "none"
								})
							}

						})
					}

				} else {
					uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					})
				}


			}

		}
	}
</script>

<style scoped lang="scss">

	page {
		background-color: #FFFFFF;
	}
	.box{
		position: fixed;
		height: 100vh;
		background-color: #FFFFFF;
	}
	
	.forget_input input {
		font-size: 24rpx;
		width: 400rpx;
	}

	.forget_input.w400 input {
		width: 400rpx;
	}

	.forget_content {
		width: 750rpx;
		padding: 0 50rpx;
		font-size: 28upx;
		box-sizing: border-box;
		margin-top: 200rpx;
	}

	.forget_content .item {
		width: 650rpx;
		height: 90rpx;
		border-radius: 50rpx;
		border: 1rpx solid #EEEEEE;
		margin-bottom: 50rpx;
	}

	.forget_content .item .forget_lable {
		font-size: 24rpx;
		font-weight: 400;
		color: #323232;
		width: 120rpx;
		margin-left: 57rpx;
	}

	.forget_content .item .forget_input {
		width: 400rpx;

	}
	.forget_input1{
		width: 430rpx;
	}
	.obtain-code{
		background: #FFFFFF;
		color: #FF4300;
	}
	.codeinput {
		width: 180rpx;
	}

	.forgeticon {
		width: 22upx;
		height: 28upx;
		margin-right: 10upx;
	}
	.fromsubmit-btn{
		margin-top: 90rpx;
		width: 650rpx;
		height: 90rpx;
		background: #FF4300;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
